{extend name='base' /}

{block name='main'}
{include file='banner'}
<style>
    #book-box .card{
        border: none;
        border-radius: inherit;
        margin-top: 15px;
        width: 20%;
    }
    #book-box .card .card-body{
        padding: 1rem;
    }
    .cat-more{
        font-size: 14px;
        color: #999;
    }
    .card-img-top{
        width: 180px;
        height: 250px;
    }
    .card-title{
        font-size: 14px;
        color: #222;
    }
    .book-price{
        color: #ee554a;
        font-weight: 700;
        font-size: 18px;
    }
    .book-author{
        color: #888;
        font-size: 14px;
    }
    @media (max-width: 992px) {
        #book-box .card{
            width: 25%;
        }
        .card-img-top{
            width: 160px;
            height: 230px;
        }
    }
    @media (max-width: 750px) {
        #book-box .card{
            width: 33.333333%;
        }
        .card-img-top{
            width: 140px;
            height: 210px;
        }
    }
</style>
<div id="book-box" class="col m-0">
    {foreach $category as $k => $v}
    <div class="row" style="border-bottom: solid #00c29a 2px;">
        <h5 class="col-7">{$v['catname']}</h5>
        <div class="col-5 text-right"><a href="{:url('category/index', array('catid' => $v['id']))}" class="card-link nav-color-info cat-more">查看更多>></a></div>
    </div>
    <div class="row">
        {foreach $v['books'] as $ks => $vs}
        <div class="card">
            <a class="card-link" href="{:url('book/info', array('bookid' => $vs['id']))}">
                <img src="{$vs['thumb']}" class="card-img-top">
                <div class="card-body pl-0">
                    <!--<div class="card-title">{$vs['bname']}</div>-->
                    <div class="book-author text-truncate">{$vs['author']}</div>
                    <div class="book-price mt-2 text">￥{$vs['price']}</div>
                    <!--<a href="#" class="btn btn-primary btn-sm">查看详情</a>-->
                </div>
            </a>
        </div>
        {/foreach}
    </div>
    {/foreach}
</div>
{/block}

{block name="js"}
<script>

</script>
{/block}